<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="chrome=1">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
    <link rel="stylesheet" href="https://cache.amap.com/lbs/static/AMap.TransferRender1120.css"/>
    <style>
        html,
        body,
        #container {
            height: 100%;
            width: 100%;
        }
        #panel {
            z-index: 999;
            position: absolute;
            background-color: white;
            max-height: 100%;
            overflow-y: auto;
            right: 10px;
            top: 10px;
            width: 280px;
        }
        #panel .amap-lib-transfer {
            border-radius: 4px;
            overflow: hidden;
        }
    </style>
    <title>公交出行</title>
</head>
<body>
<div style="position: relative;">
    <div style="position: absolute;z-index: 5;width: 220px;height: 80px;background-color: whitesmoke;float: left;">
        <div style="margin-left: 15px;">起始点:<input id="startPlace" type="text" style="width: 150px;margin-left: 15px;"/>
        </div>
        <div style="margin-left: 15px;">目的地:<input id="endPlace" type="text" style="width: 150px;margin-left: 15px;"/>
        </div>
        <button style="float: right;" onclick="search()" style="width: 50px;">查询</button>
    </div>
</div>

<div id="container" tabindex="0"></div>
<div id="panel"></div>
<link rel="stylesheet" href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css" />
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<script src="https://a.amap.com/jsapi_demos/static/demo-center/js/demoutils.js"></script>
<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=d9eb5abfb1674e63e0489f98bc7ae6d3&plugin=AMap.Transfer"></script>
<script type="text/javascript" src="https://cache.amap.com/lbs/static/TransferRender1230.js"></script>
<script src="http://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
<script type="text/javascript">


    var appId;
    var timestamp;
    var nonceStr;
    var signature;
    $(function(){

            $.ajax({
                type: "GET",
                url: "http://jinlai.free.idcfengye.com/weChatLogin/getTicket",
                dataType: "json",
                success: function(data){
                   console.log(data);
                   appId=data.appId;
                   timestamp=data.timestamp;
                   nonceStr=data.nonceStr;
                   signature=data.signature;

                    wx.config({
                        debug: true,
                        appId: appId,
                        timestamp: timestamp,
                        nonceStr: nonceStr,
                        signature: signature,
                        jsApiList: ['openLocation']
                    });

                    var map;
                    wx.ready(function () {
                        wx.getLocation({
                            type: 'wgs84', // 默认为wgs84的gps坐标，如果要返回直接给openLocation用的火星坐标，可传入'gcj02'
                            success: function (res) {
                                //使用微信内置地图查看位置接口
                                // wx.openLocation({
                                //     latitude: res.latitude, // 纬度，浮点数，范围为90 ~ -90
                                //     longitude: res.longitude, // 经度，浮点数，范围为180 ~ -180。
                                //     name: '浙江禾元软件', // 位置名
                                //     address: '车路协同解决方案', // 地址详情说明
                                //     scale: 28, // 地图缩放级别,整形值,范围从1~28。默认为最大
                                //     infoUrl: 'http://www.heyuan-soft.cn/' // 在查看位置界面底部显示的超链接,可点击跳转（测试好像不可用）
                                // });
                                var gps = [res.longitude, res.latitude];
                                AMap.convertFrom(gps, 'gps', function (status, result) {
                                    if (result.info === 'ok') {
                                        var lnglats = result.locations; // Array.<LngLat>

                                        map = new AMap.Map('container', {
                                            resizeEnable: true,
                                            center: [lnglats[0].R, lnglats[0].Q],
                                            zoom: 20
                                        });
                                    }
                                });


                                AMap.plugin('AMap.ToolBar', function () {
                                    var toolbar = new AMap.ToolBar();
                                    map.addControl(toolbar)
                                });
                                // var geocoder = new AMap.Geocoder({
                                //     radius: 100,
                                //     extensions: "all"
                                // });
                            },
                            cancel: function (res) {

                            }
                        });
                    });





                }
            });
    });



    function search() {
        var startPlace = document.getElementById("startPlace").value; //获取起始点名称
        var endPlace = document.getElementById("endPlace").value; //获取目的地名称
        handleMap(startPlace, endPlace);
    }

    function handleMap(startPlace, endPlace) {
        var transOptions = {
            map: map,
            city: '嘉兴市',
            panel: 'panel',
            policy: AMap.TransferPolicy.LEAST_TIME //乘车策略
        };
        //构造公交换乘类
        var transfer = new AMap.Transfer(transOptions);
        //根据起、终点名称查询公交换乘路线
        transfer.search([
            {keyword: startPlace,city:'嘉兴'},
            //第一个元素city缺省时取transOptions的city属性
            {keyword: endPlace,city:'嘉兴'}
            //第二个元素city缺省时取transOptions的cityd属性
        ], function(status, result) {
            // result即是对应的公交路线数据信息，相关数据结构文档请参考  https://lbs.amap.com/api/javascript-api/reference/route-search#m_TransferResult
            if (status === 'complete') {
                log.success('绘制公交路线完成')
            } else {
                log.error('公交路线数据查询失败' + result)
            }
        });
    }

</script>
<script type="text/javascript" src="https://webapi.amap.com/demos/js/liteToolbar.js"></script>
</body>
</html>